<template>
  <div id="login">
    <transition
      name="animate__animated "
      enter-active-class="animate__bounceInDown"
    >
      <div class="user_register" v-if="isShow">
        <div class="title">登录</div>
        <el-form
          :model="userMessage"
          status-icon
          :rules="rules"
          ref="userMessage"
        >
          <el-form-item label="账号 / 手机号" prop="username">
            <el-input v-model="userMessage.phone" :maxlength="11"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="userMessage.password"
              autocomplete="off"
              :maxlength="16"
            ></el-input>
          </el-form-item>
          <div class="bottom">
            <el-button plain @click="goRegister">注册</el-button>
            <el-button type="primary" class="submit" @click="submitForm">
              登录
            </el-button>
          </div>
        </el-form>
      </div>
    </transition>
  </div>
</template>

<script>
  import { userLogin } from '@/utils/space.js'

  export default {
    name: 'Login',
    data() {
      return {
        isShow: false,  //登录框开局隐藏
        allUsers: [],  //存储所有用户信息
        userMessage: {  //用户数据对象
          phone: '',
          password: '',
        },
        rules: {  //表单验证规则
          phone: [
            { validator: this.checkName, trigger: 'blur', }
          ],
          password: [
            { validator: this.checkPassword, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      //提交表单
      submitForm() {
        this.$refs.userMessage.validate(async (valid) => {
          if (valid) {
            await userLogin(this.userMessage).then(response => {

              if (response.data.code) {
                localStorage.setItem('user', JSON.stringify(response.data.data))
                this.$message.success('登录成功')
                // 登录成功后跳转到聊天界面
                this.$router.replace('/home/chatBox/standbyPage')
                this.$store.commit('changeType', 'chatBox')
              } else {
                this.$message.error('账号或密码错误！')
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      goRegister() {
        this.$router.push('/register')
      },

      // //表单验证规则
      checkName(rule, value, callback) {
        if (!value) {
          callback(new Error('账号 / 手机号不能为空'));
        }
        else if (!/^[A-Za-z0-9]+$/.test(value)) {
          callback(new Error('请输入正确的账号 / 手机号'))
        }
        else if (!/^\w{2,11}$/.test(value)) {
          callback(new Error('请输入正确的账号 / 手机号'))
        }
        else {
          callback()
        }
      },
      checkPassword(rule, value, callback) {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (!/^[^\s]*$/.test(value)) {
          callback(new Error('不能输入空格'));
        } else {
          callback()
        }
      },
    },
    mounted() {
      this.isShow = true
    }
  }
</script>

<style scoped>
  #login {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #2f3136;
  }

  .user_register {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 30%;
    padding: 10px 20px;
    border-radius: 15px;
    box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);
    background-color: #202225;
    color: #fff;
  }

  .user_register .title {
    flex: 1;
    font-size: 24px;
    text-align: center;
  }

  .user_register .bottom {
    display: flex;
    justify-content: right;
  }

  .user_register /deep/ .el-form-item__label {
    color: #b9bbbe;
  }

  .user_register /deep/ .el-input__inner {
    color: #b9bbbe;
    background-color: #2f3136;
  }
  /* 动画样式 */
</style>

